<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <tree_tools :tree-nodes="{name: '江苏传智播客教育科技股份有限公司', manager: '负责人'}" :is-root="true" />
        <hr>
        <!-- 以上是头部的公司信息, 下面是树形的部门结构 -->
        <el-tree :data="departs" :props="{label: 'name'}" :default-expand-all="true">
          <!-- 作用域插槽需要指定两个东西
          1. 插槽名字
          2. 接收数据的形参 -->
          <!-- <template slot="default" slot-scope="scoped"> -->
          <!-- <template v-slot:default="scoped"> -->
          <template #default="scoped">

            <tree_tools :tree-nodes="scoped.data" :is-root="false" />
          </template>
        </el-tree>
      </el-card>
    </div></div>
</template>

<script>
import { departments } from '@/api/departments'
import tree_tools from './component/tree_tools'
export default {
  components: {
    tree_tools
  },
  data() {
    return {
      departs: [

      ]
    }
  },
  async created() {
    this.departments()
  },

  methods: {
    async departments() {
      const res = await departments()
      console.log(res)
      this.departs = res.depts
      console.log(this.departs)
    }
  }
}
</script>

<style>

</style>
